<template>
  <div class="cloud-teller-manage" v-loading="loading" element-loading-text="加载中。。。">
    <div>
      <el-card class='cloud-teller-card'>
        <el-form ref='queryForm' :model='queryForm' size='mini' label-position='top'>
          <el-row :gutter="10">
            <el-col :md='6' :lg='4'>
              <el-form-item label='柜员号' prop='AGENTID'>
                <el-input v-model='queryForm.AGENTID' maxlength="8" placeholder="请输入柜员号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md='6' :lg='4'>
              <el-form-item label='柜员姓名' prop='AGENTNAME'>
                <el-input v-model='queryForm.AGENTNAME' maxlength="8" placeholder="请输入柜员姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md='6' :lg='4'>
              <el-form-item label='岗位' prop='POSTID'>
                <el-select v-model='queryForm.POSTID'>
                  <el-option v-for='item in POSTOpions' :key='item.POSTID' :label='item.POSTNAME' :value='item.POSTID'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md='6' :lg='4'>
              <el-form-item label='工作日可用' prop='WORKDAY'>
                <el-select v-model='queryForm.WORKDAY'>
                  <el-option v-for='item in WORKDAYOpions' :key='item.value' :label='item.label' :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md='6' :lg='4'>
              <el-form-item label='节假日可用' prop='HOLIDAY'>
                <el-select v-model='queryForm.HOLIDAY'>
                  <el-option v-for='item in HOLIDAYOpions' :key='item.value' :label='item.label' :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='primary' size='mini' icon='el-icon-search' @click="queryModel('search')">查询</el-button>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('queryForm')">重置</el-button>
            </el-col>  
          </el-row>
        </el-form>
      </el-card>
      <el-card style="margin-top: 10px">
        <el-col :lg="3" :md="2" v-if="btnPermission('Button_Warning_Add')">
          <el-button type="primary" size="mini" @click="addDialogShow" icon='el-icon-plus'>新增</el-button>
        </el-col>
        <el-table ref="tableData" :data='tableDataPage' border min-height="400" width='100%' class="tableMarginTop" header-row-class-name="tableHeaderClass" highlight-current-row>
          
          <el-table-column prop='AGENTID' label='柜员工号'></el-table-column>
          <el-table-column prop='AGENTNAME' label='柜员姓名'></el-table-column>
          <el-table-column prop='POSTID' label='岗位编号'></el-table-column>
          <el-table-column prop='POSTNAME' label='岗位名称'></el-table-column>
          <el-table-column prop='WORKDAY' label='工作日可用'>
            <template slot-scope="scope">
            <span v-if="scope.row.WORKDAY=='0'">不可用</span>
            <span v-if="scope.row.WORKDAY=='1'">可用</span>
            </template>
          </el-table-column>
          <el-table-column prop='HOLIDAY' label='节假日可用'>
           <template slot-scope="scope">
           <span v-if="scope.row.HOLIDAY=='0'">不可用</span>
           <span v-if="scope.row.HOLIDAY=='1'">可用</span>
          </template>
          </el-table-column>
          <!-- <el-table-column prop='MAINTAINDATE' label='维护日期'></el-table-column> -->
          <el-table-column label='操作' align="center" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleClickDialog(scope.row)">维护</el-button>
              <el-button size="mini" type="danger" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right;margin-top:20px;" v-show="this.tableData" :current-page="currentPage" background :page-size="pageSize"
          @current-change="changePage" layout="total, prev, pager, next, jumper" :total="tableData.length">
        </el-pagination>
      </el-card>

      <keep-alive>
        <component :is='dialogList.tellerPost' :option='dialogOptions' @refreshTable="queryModel('search')"></component>
      </keep-alive>
      <keep-alive>
        <component :is='dialogList.createTellerPost' :option='addDialogOptions' @refreshTable="queryModel('search')"></component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
  import tellerPost from "./dialog/tellerPost";
  import createTellerPost from "./dialog/createTellerPost";
  import selectTree from "@/components/selectTree2/";
  import getGlobalParams from '@/common/utils/getGlobalParams';
  //通讯相关
  import request from "@/common/utils/requestCT";
  import tellerPostQuery from "@/message/CTManage/teller-post/teller-post-query";
  import tellerChannelDel from "@/message/CTManage/teller-post/teller-post-del";
  import queryInfo from "@/message/CTManage/agent-postinfo-manage/agent-postinfo-query";
  export default {
    name: "cloud-teller-manage",
    components: {
      selectTree
    },
    data() {
      return {
        addDialogOptions: {
          isShow: false,
          tableData: this.tableData
        },
        //页面公用
        loading: false,
        //表格
        tableTotal: 0,
        tableData: [],
        currentPage: 1,
        pageSize: getGlobalParams.get("PageSize"),
        delButtonShow: false,
        updateButtonShow: false,
        queryForm: {
          AGENTID: '',
          AGENTNAME: '',
          POSTID: '',
          WORKDAY: '',
          HOLIDAY: ''
        },
        currentRow: [],
        dialogList: {
          tellerPost,
          createTellerPost
        },
        dialogOptions: {
          isShow: false,
          font: '',
          currentRow: {}
        },
        addDialogOptions: {
          isShow: false,
          font: '',
          currentRow: {}
        },
        POSTOpions: [],
        WORKDAYOpions: [{
            value: '0',
            label: '不可用'
          },
          {
            value: '1',
            label: '可用'
          }
        ],
        HOLIDAYOpions: [{
            value: '0',
            label: '不可用'
          },
          {
            value: '1',
            label: '可用'
          }
        ]
      };
    },
    mounted() {
      this.queryModel();
      this.queryPost();
    },
    computed: {
      tableDataPage() {
        return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
      }
    },
    methods: {
      addDialogShow(row) {
        this.addDialogOptions.currentRow = row;
        this.addDialogOptions.isShow = !this.addDialogOptions.isShow;
        this.addDialogOptions.tableData = this.tableData;
      },
      // 点击新增修改按钮事件
      handleClickDialog(row) {
        this.dialogOptions.currentRow = row;
        this.dialogOptions.isShow = !this.dialogOptions.isShow;
      },
      changePage(val) {
        this.currentPage = val
      },
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      // 查询云柜员与岗位信息方法
      async queryModel(data) {
        if(data == 'search'){
          this.currentPage = 1;
        }
        this.loading = true;
        this.tableData = [];
        this.tableTotal = 0;
        let resBody = new tellerPostQuery();
        resBody.data.AGENTID = this.queryForm.AGENTID;
        resBody.data.AGENTNAME = this.queryForm.AGENTNAME;
        resBody.data.POSTID = this.queryForm.POSTID
        resBody.data.WORKDAY = this.queryForm.WORKDAY;
        resBody.data.HOLIDAY = this.queryForm.HOLIDAY
        resBody.QueryPageNo = this.currentPage;
        resBody.QueryRowNum = this.pageSize;
        let response = await request(resBody);
        this.loading = false;
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableData = response.RSP_BODY.resultSet;
          this.tableTotal = response.RSP_BODY.total * 1
          //  || response.QUERY_INFO_HEAD.QueryAllDataCount;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      handleDel(row) {
        console.log(row)
        this.$confirm("此操作将永久删除" + row.AGENTNAME + "的关联关系 是否继续？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.delFun(row);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      async delFun(row) {
        this.loading = true;
        let resBody = new tellerChannelDel();
        resBody.data.AGENTID = row.AGENTID;
        resBody.data.POSTID = row.POSTID;
        resBody.data.WORKDAY = row.WORKDAY;
        resBody.data.HOLIDAY = row.HOLIDAY;
        let response = await request(resBody);
        this.loading = false;
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.$message({
            type: "success",
            message: "柜员对应渠道关系解除成功!"
          });
          this.queryModel('search');
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      //查询岗位基本信息
      queryPost() {
        this.loading = true; 
        let resBody = new queryInfo();
        request(resBody)
            .then(response=>{
                if (response.SYS_HEAD.ReturnCode == "000000") {
                    this.POSTOpions = response.RSP_BODY.resultSet;
                } else {
                    this.$message({
                        type: "error",
                        message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                    });
                }
                this.loading = false;
            })
            .catch(error=>{
                this.$message({
                    type: "warning",
                    message: "页面出错！"
                });
                this.loading = false;
                console.error(error)
            })
        },
    },
    // async created() {}
  };
</script>


<style lang="scss" scoped>
  .type-info-bottom {
    margin-top: 10px;
  }
  .box {
    margin-top: 20px;
    text-align: right;
  }
  .headerClass {
    background: #f7f7f7 !important;
  }
  .el-date-editor.el-input {
    width: 100% !important;
  }
  .el-card {
    overflow: inherit;
  }
</style>
